

// 设置 连接服务器的Websocket
let websocket = new WebSocket("ws://" + location.host + "/socket");

websocket.onopen = function () {
  console.log("连接成功");
};
websocket.onmessage = function (e) {
  handleMessage(e.data);//处理消息
};
//处理消息
function handleMessage(e) {
  let message = JSON.parse(e);
  switch (message.type) {
    case 0:
      // 关闭连接
      closeWebSocket();
      break;
    case 1:
      // 处理文本消息
      handleType1(message);
      break;
    case 2:
      // 处理好友添加
      handleType2(message);
      break;
    case 4:
     handleType4(message) ; 
    break ;
    }
}


// 处理被删除后的消息
function handleType4(message){
        //  获取消息show
      let messageShow = document.querySelector('.right .message-show');
      let box = document.createElement('div');
      box.className = 'box';

      //创建li
      box.innerHTML = 
      '<div class="user-img"><img src="' + getAvatarUrl(message.headImage) + '"></div>' +
        ' <div class="info">' +
        '<h6>' + message.fromName + '</h6>' +
        '<p>' + message.content + '</p>' + '</div>'
        + '<img id="gth" src="/pic/感叹号.png">' ;

      let line = document.createElement('div');
      // 如果消息是当前用户发的
        line.className = 'message message-right';
      line.appendChild(box);
      messageShow.appendChild(line);
      // 设置滚动条滚动,让滚动条在最下面
      scrollBottom(messageShow);
  }

// 处理添加好友消息
function handleType2(message) {
  let sessionUL = document.querySelector('#session-list');

  // 创建li  
  // 把 li插入到 UL里,同时是置顶元素
  const li = document.createElement('li');
  li.setAttribute('friend-id', message.fromId);

  // 创建头像
  const img = document.createElement('img');
  img.src = message.headImage;
  img.alt = "头像";
  img.className = "avatar";
  li.appendChild(img);

  // 创建内容
  const div = document.createElement('div');
  div.className = "list-li2";

  // 创建用户名
  const h4 = document.createElement('h4');
  h4.textContent = escapeHtml(message.fromName);
  div.appendChild(h4);

  const p = document.createElement("p");
  p.textContent = escapeHtml("请求添加好友");
  div.appendChild(p);

  // 创建添加按钮
  const button = document.createElement('button');
  button.textContent = "同意";
  button.addEventListener('click', () => agree(message));
  div.appendChild(button);

  // 创建取消
  const button2 = document.createElement('button');
  button2.textContent = "拒绝";
  button2.addEventListener('click', () => refuse(message));
  div.appendChild(button2);

  li.appendChild(div);
  sessionUL.insertBefore(li, sessionUL.children[0]);
}

// 同意添加好友
function agree(message) {
  
  $.ajax({
     url: '/user/agree',
     type: 'post',
     data:{
      userId : user.userId ,
       fromId: message.fromId  
     },
      success: function(result){
       check(result) ; 
       alert("已同意好友申请");
        getSessionList() ;
    },
    error: function(result){
       alert("系统繁忙,请稍后再试");
    } 
     
  });
  
}

// 拒绝添加好友
function refuse(message) {
  $.ajax({
    url: '/user/refuse',
    type: 'get',
    data:{
       userId : user.userId ,
       fromId: message.fromId 
    },
    success: function(result){
       alert("已拒绝好友申请");
       getSessionList() ;
    },
    error: function(result){
       alert("系统繁忙,请稍后再试");
    }

  });

}

// 处理文本消息
function handleType1(message) {
  let sessionUL = document.querySelector('#session-list');
  let allLi = document.querySelectorAll('#session-list li');
  let lastMessage = '';
  if (message.content.length > 13) {
    lastMessage = message.content.substring(0, 13) + '...';
  } else {
    lastMessage = message.content;
  }
  let targetLi = null;
  for (let li of allLi) {
    if (message.sessionId == li.getAttribute('session-id')) {
      targetLi = li;
      break;
    }
  }
  // 如果会话在会话列表里

  if (targetLi != null) {
    sessionUL.insertBefore(targetLi, sessionUL.children[0]);
    targetLi.querySelector('p').innerHTML = lastMessage;
    targetLi.querySelector('#unread').className = '';
    //  同时处理 右边聊天框 ;
    // 如果当前会话是处于被选中状态的
    // 那么消息应该出现在右边的聊天框里
    if (session_title.sessionId == message.sessionId) {
      targetLi.querySelector('#unread').className = "unread-hide";
      // 获取当前用户
      let userId = user.userId;
      //  获取消息show
      let messageShow = document.querySelector('.right .message-show');
      let sr = targetLi.querySelector('img').getAttribute("src");
      let box = document.createElement('div');
      box.className = 'box';

      //创建li
      box.innerHTML = '<div class="user-img"><img src="' + getAvatarUrl(message.headImage) + '"></div>' +
        ' <div class="info">' +
        '<h6>' + message.fromName + '</h6>' +
        '<p>' + message.content + '</p>' + '</div>';

      let line = document.createElement('div');
      // 如果消息是当前用户发的
      if (userId == message.fromId) {
        line.className = 'message message-right';
      } else {
        line.className = 'message message-left';
      }
      line.appendChild(box);
      messageShow.appendChild(line);
      // 设置滚动条滚动,让滚动条在最下面
      scrollBottom(messageShow);
    }
  } else {
    targetLi = document.createElement('li');

    // 使用处理后的头像URL
    targetLi.innerHTML = '<img src="' + getAvatarUrl(message.headImage) + '">' +
      '<div class="list-li">' +
      ' <h3>' + message.fromName + '</h3>' +
      ' <p>' + lastMessage + '</p>' + '</div>' +
      ' <div id="unread" style="background-color:brown;"></div>';
    // 把 li插入到 UL里,同时是置顶元素
    sessionUL.insertBefore(targetLi, sessionUL.children[0]);
    // 要给 这个新创建的 加入 点击事件 和 session-id
    //  添加点击事件
    targetLi.onclick = function () {
      clickSession(targetLi);
    };
    targetLi.setAttribute('session-id', message.sessionId);
  }



  // 旧 
  // if (targetLi != null) {
  //   sessionUL.insertBefore(targetLi, sessionUL.children[0]);
  //   targetLi.querySelector(' p').innerHTML = lastMessage;
  //   targetLi.querySelector('#unread').className = '';

  //   if (session_title.sessionId == message.sessionId) {
  //     targetLi.querySelector('#unread').className = "unread-hide";

  //     let userId = user.userId;

  //     let messageShow = document.querySelector('.right .message-show');
  //     let sr = targetLi.querySelector('img').getAttribute("src") ; 
  //     let box = document.createElement('div');
  //     box.className = 'box';
  //     box.innerHTML = '<div class="user-img"><img src="' +message.headImage + '"></div>' +
  //       ' <div class="info">' +
  //       '<h6>' + message.fromName + '</h6>'
  //       + '<p>' + message.content + '</p>' + '</div>';
  //     let line = document.createElement('div');

  //     if (userId == message.fromId) {
  //       line.className = 'message message-right';
  //     } else {
  //       line.className = 'message message-left';
  //     }
  //     line.appendChild(box);
  //     messageShow.appendChild(line);

  //     scrollBottom(messageShow);
  //   }
  // } else {
  //   // 如果不存在,则创建出新的会话 
  //   //  还要让服务器保存这个新会话 ;
  //   targetLi = document.createElement('li');

  //   //  因为是创建出来的会话,所有是没有消息的, 所以<p>里是空的
  //   targetLi.innerHTML = '<img src="' + message.headImage +  ' ">' +
  //     '<div class="list-li">' +
  //     ' <h3>' + message.fromName + '</h3>' +
  //     ' <p>' + lastMessage + '</p>' + '</div>' +
  //     ' <div id="unread" style="background-color:brown;"></div>';


  //   sessionUL.insertBefore(targetLi, sessionUL.children[0]);

  //   targetLi.onclick = function () {
  //     clickSession(targetLi);
  //   };
  //   targetLi.setAttribute('session-id', message.sessionId);
  // }

}





// 统一处理头像URL的函数
function getAvatarUrl(url) {
  // 
  return url || '/pic/kun.jpg'; // 默认图片
}














// 关闭连接
function closeWebSocket() {
  alert("当前账号已在别处登录");
  location.href = 'login.html';
  websocket.close(1000);
}


websocket.onerror = function () {
  console.log("连接发生异常");
};
websocket.onclose = function () {
  console.log("连接关闭");
};



const user = new Vue({
  el: '#user',
  data() {
    return {
      userId: 0,
      userName: '',
      avatarUrl: '/pic/kun.jpg',
      isUploading: false // 添加上传状态
    }
  },
  methods: {
    chooseAvatar() {
      console.log('触发头像选择'); // 日志验证
      const fileInput = document.getElementById('avatarFileInput');
      if (!fileInput) {
        console.error('未找到文件输入框');
        return;
      }
      fileInput.value = '';
      fileInput.click();
    },

    handleAvatarChange(e) {
      console.log('文件选择触发'); // 日志验证
      const file = e.target.files[0];
      if (!file || !file.type.startsWith('image/')) {
        alert('请选择有效的图片文件');
        return;
      }

      // 本地预览
      const reader = new FileReader();
      reader.onload = (event) => {
        this.avatarUrl = event.target.result;
      };
      reader.readAsDataURL(file);

      // 上传到 OSS
      this.uploadToOSS(file);
    },

    uploadToOSS(file) {
      const self = this; // 固定上下文
      self.isUploading = true;

      const formData = new FormData();
      formData.append('avatarFile', file);
      formData.append('userId', self.userId);

      $.ajax({
        url: '/api/upload/avatar',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: (res) => {
          if (res.code === 200) {
            self.avatarUrl = res.data;
            alert('头像上传成功！');
          } else {
            alert(`上传失败：${res.errMsg}`);
          }
        },
        error: (xhr) => {
          alert(`网络错误：${xhr.statusText}`);
        },
        complete: () => {
          self.isUploading = false;
        }
      });
    }
  }
});


function getUserInfo() {
  $.ajax({
    type: 'get',
    url: '/user/getUserInfo',
    success: function (result) {
      check(result);
      let data = result.data;
      user.userName = data.userName;
      user.userId = data.userId;
      if (data.headImage != null && data.headImage != "") {
        user.avatarUrl = data.headImage;
      }
      getAddList();
    },
    error: function (result) {
      if (result.status == 401) {
        console.log("用户没有登录");
        location.href = 'login.html';
      }
    }

  });
}

getUserInfo();


// 专门处理 错误或未登录
function check(result) {
  if (result.code == -1) {
    alert("系统繁忙,请稍后重试")
    console.log(result.errMsg);
    throw new Error("发生错误,");
  }
  if (result.code == -2) {
    alert("请先进行登录");
    location.href = 'login.html';
    return;
  }
}

// 会话列表
const session_list = new Vue({
  el: '#session-list',
  data() {
    return {
      class_name: 'list'
    }
  },
  methods: {

  }
});

// 获取会话列表
function getSessionList() {
  const sessionList = document.querySelector('#session-list');
  sessionList.innerHTML = '';

  $.ajax({
    type: 'get',
    url: '/session/getSessionListByUserId',
    success: function (result) {
      check(result);
      const liList = result.data || [];

      liList.forEach(session => {
        // 处理最后一条消息, 避免消息过长
        const lastMessage = session.lastMessage
          ? session.lastMessage.length > 13
            ? session.lastMessage.substring(0, 13) + '...'
            : session.lastMessage
          : '';

        // 处理头像路径 
        const headImage = session.headImage && session.headImage.trim() !== ""
          ? session.headImage
          : "/pic/kun.jpg"; // 默认头像

        //  创建会话
        const li = document.createElement('li');

        // 会话头像+name+最后一条消息
        li.innerHTML = `
          <img src="${headImage}" alt="${session.friends[0]?.friendName || '未知好友'}头像" class="avatar">
          <div class="list-li">
            <h3>${escapeHtml(session.friends[0]?.friendName || '未知好友')}</h3>
            <p>${escapeHtml(lastMessage)}</p>
          </div>
          <div id="unread" class="unread-hide" style="background-color:brown;"></div>
        `;

        // 添加点击事件
        li.onclick = function () {
          clickSession(li); // 点击会话时间
        };

        // 设置会话id属性
        li.setAttribute('session-id', session.sessionId);

        sessionList.appendChild(li);
      });
    }
  });
}

// 转义函数（防止XSS攻击）
function escapeHtml(unsafe) {
  if (!unsafe) return '';
  return unsafe.replace(/[&<"'>]/g, function (match) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[match];
  });
}


getSessionList();

//  会话选中
function clickSession(selectLi) {
  let allLi = document.querySelectorAll('#session-list li');
  for (let li of allLi) {
    if (li == selectLi) {
      li.className = 'selected';
      //清除未读红点
      li.querySelector('#unread').className = 'unread-hide';
      // 选中后获取当前会话的历史消息
      getHistoryMessage(li);
    } else {
      li.className = '';
    }
  }
}


// 获取历史消息
function getHistoryMessage(currentLi) {
  const sessionId = currentLi.getAttribute("session-id");
  session_title.sessionId = sessionId;
  session_title.title_name = currentLi.querySelector('h3').innerHTML;
  const messageShow = document.querySelector('.message-show');
  messageShow.innerHTML = '';  // 清空历史消息
  const userId = user.userId;  // 假设user对象已正确定义

  $.ajax({
    type: 'get',
    url: '/message/getHistoryMessage',
    data: { sessionId: sessionId },
    success: function (result) {
      check(result);
      const messageList = result.data || [];

      messageList.forEach(message => {
        const headImage = message.headImage && message.headImage.trim() !== ""
          ? message.headImage  // 如果有头像
          : "/pic/kun.jpg";    // 如果没有头像使用默认头像

        const li = document.createElement('div');

        li.className = message.fromId === userId
          ? "message message-right"  // 自己发送的消息右对齐
          : "message message-left";   // 对方消息左对齐

        li.innerHTML = `
          <div class="box">
            <div class="user-img">
              <img src="${headImage}" alt="${message.fromName}头像" class="avatar">  <!-- 修正src属性 -->
            </div>
            <div class="info">
              <h6>${escapeHtml(message.fromName)}</h6>  
              <p>${escapeHtml(message.content)}</p>      
            </div>
          </div>
        `;

        messageShow.appendChild(li);
      });

      scrollBottom(messageShow);  // 设置滚动条
    }
  });
}

// 辅助函数：转义HTML特殊字符（防止XSS攻击）
function escapeHtml(unsafe) {
  if (!unsafe) return '';
  return unsafe.replace(/[&<"'>]/g, function (match) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[match];
  });
}


// messageShow 是整个显示消息的区域
function scrollBottom(messageShow) {
  //1. 获取聊天区域的高度
  let messageShowHeight = messageShow.offsetHeight;
  //  2. 获取里面内容的实际高度 ;
  let scrollHeight = messageShow.scrollHeight;
  // 3. 滚动条水平方向无需滚动, 只需要垂直方向滚动 ;
  messageShow.scrollTo(0, scrollHeight - messageShowHeight);
}


// 聊天区域会话标题
const session_title = new Vue({
  el: '#session-title',
  data() {
    return {
      title_name: '',
      sessionId: 0

    }
  },
  methods: {
    // 删除好友
    deleteFriend() {
      if (this.title_name == '' || this.sessionId == 0) {
        alert("请先选择要删除的好友");
        return;
      }

      if (confirm("是否删除这位好友")) {
        $.ajax({
          url: '/friend/deleteFriend',
          type: 'put',
          data: {
            userId: user.userId,
            sessionId: this.sessionId,
            friendName: this.title_name
          },
          success(result) {
            check(result);
            alert("删除成功");
            getSessionList();
            const messageShow = document.querySelector('.message-show');
            messageShow.innerHTML = '';  // 清空历史消息
              this.title_name = '';
              this.sessionId = 0;
             session_title.title_name = '';
             session_title.sessionId = 0; 
          },
          error(retult) {
            alert("删除失败请稍后再试");
          }


        });
      }

    }

  }
});

// 搜索按钮
const search = new Vue({
  el: '#search',
  data() {
    return {
      input: '',
      searchResults: []  // 搜索结果数组
    }
  },
  methods: {
    // 搜索好友方法
    searchFriends() {
      //如果没有输入就不搜
      const keyword = this.input.trim();
      if (!keyword) {
        alert('请输入要搜索的用户名');
        return;
      }

      friend_table.onclick(); // 点击好友列表
      $.ajax({
        type: 'get',
        url: '/friend/searchFriends',
        data: { keyword: keyword, userId: user.userId },  // 搜索关键字

        success: (result) => {
          check(result);  // 判断
          this.searchResults = result.data || [];

          const friendList = document.querySelector('#friend-list'); // 好友列表
          friendList.innerHTML = '';  //清空好友列表

          this.searchResults.forEach(friend => {
            // 如果没有头像就用默认的
            const headImage = friend.headImage && friend.headImage.trim() !== ""
              ? friend.headImage
              : "/pic/kun.jpg";

            //  根据查出来的数据创建
            const li = document.createElement('li');
            li.setAttribute('friend-id', friend.friendId);

            // 创建头像
            const img = document.createElement('img');
            img.src = headImage;
            img.alt = "头像";
            img.className = "avatar";
            li.appendChild(img);

            // 创建内容
            const div = document.createElement('div');
            div.className = "list-li2";

            // 创建用户名
            const h4 = document.createElement('h4');
            h4.textContent = escapeHtml(friend.friendName);
            div.appendChild(h4);

            // 创建添加按钮
            const button = document.createElement('button');
            button.textContent = "添加好友";
            button.addEventListener('click', () => this.addFriend(friend));
            div.appendChild(button);

            li.appendChild(div);
            friendList.appendChild(li);
          });
          this.input = '';
        },
        error: (xhr) => {
          alert(`搜索失败：${xhr.statusText}`);
        }
      });
    },

    // 添加好友
    addFriend(friend) {
      if (confirm(`是否添加 ${friend.friendName} 为好友？`)) {
        let fromId = user.userId;
        let friendId = friend.friendId;
        let headImage = user.avatarUrl;

        let request = {
          type: 2,
          fromId: fromId,
          fromName: user.userName,
          target: friendId,
          headImage: headImage
        }
        //  把json转为json字符串
        request = JSON.stringify(request);
        //发送消息
        websocket.send(request);
        alert("已发送添加请求,等待对方同意");
      }
    }
  },
  // 注册转义函数（防止XSS）
  computed: {
    escapeHtml() {
      return function (unsafe) {
        if (!unsafe) return '';
        return unsafe.replace(/[&<"'>]/g, function (match) {
          return {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
          }[match];
        });
      };
    }
  }
});


// 好友列表
const friend_list = new Vue({
  el: '#friend-list',
  data() {
    return {
      class_name: 'list hide'
    }
  },
  methods: {

  }
});

// 会话标签 , 好友标签
const session_table = new Vue({
  el: '#session-table',
  data() {
    return {
    }
  },
  methods: {
    // 设置点击会话标签时,变化 : 选中会话标签, 同时切换到会话列表
    onclick() {
      this.$el.style.backgroundImage = 'url(/pic/对话2.png)';
      friend_table.$el.style.backgroundImage = 'url(/pic/联系人.png)';
      session_list.class_name = 'list';
      friend_list.class_name = 'list hide';
      getSessionList();
    }
  }
});
const friend_table = new Vue({
  el: '#friend-table',
  data() {
    return {

    }
  },
  methods: {
    // 设置点击好友标签时,变化 : 选中好友标签, 同时切换到好友列表
    onclick() {
      this.$el.style.backgroundImage = 'url(/pic/联系人2.png)';
      session_table.$el.style.backgroundImage = 'url(/pic/对话.png)';
      session_list.class_name = 'list hide';
      friend_list.class_name = 'list';
      getFriendList();
    }
  }
});


// 获取好友列表
function getFriendList() {
  const friendList = document.querySelector('#friend-list');
  friendList.innerHTML = '';
  $.ajax({
    type: 'get',
    url: '/friend/getFriendListByUserId',
    success: function (result) {
      check(result);
      const list = result.data || [];

      list.forEach(friend => {
        // 如果没有头像就用默认的
        const headImage = friend.headImage && friend.headImage.trim() !== ""
          ? friend.headImage
          : "/pic/kun.jpg";

        // 创建列表项
        const li = document.createElement('li');

        li.innerHTML = `
          <img src="${headImage}" alt="头像" class="avatar">
          <div class="list-li">
            <h4>${escapeHtml(friend.friendName)}</h4>
          </div>
        `;

        // 添加点击事件
        li.onclick = function () {
          clickFriend(friend); // 传递好友数据到处理函数
        };
        // 设置好友ID属性
        li.setAttribute('friend-id', friend.friendId);

        // li.classList.add('friend-item');

        friendList.appendChild(li);
      });
    },
    error: function () {
      friendList.innerHTML = '<li class="error-item">加载好友列表失败</li>';
    }
  });
}

// 防止攻击
function escapeHtml(unsafe) {
  if (!unsafe) return '';
  return unsafe.replace(/[&<"'>]/g, function (match) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[match];
  });
}

getFriendList();
//  点击好友事件

// 好友列表点击事件
function clickFriend(friend) {
  // 1. 首先判断好友是否存在于 会话列表里 
  //     通过好友Name在 会话列表里找,在不在

  let sessionLi = getSessionByFriendName(friend.friendName);
  const sessionUL = document.querySelector('#session-list');

  // 处理头像路径 
  const headImage = friend.headImage && friend.headImage.trim() !== ""
    ? friend.headImage
    : "/pic/kun.jpg"; //默认头像

  if (sessionLi) {
    // 2. 存在则置顶并选中，获取历史消息
    sessionUL.insertBefore(sessionLi, sessionUL.firstChild);
    //  让 li 处于选中状态 ;
    // 前面 会话列表已经有 clickSession(li) 函数: 就是选中li元素 ;
    // 所以这里可以直接调用这个 函数, 或通过js 模拟一次 点击操作
    // 让sessionLi 模拟一次点击操作; 
    sessionLi.click(); // 触发选中效果

  } else {
    //  3.如果不存在,则创建出新的会话 , 置顶, 同时选中; 
    //  还要让服务器保存这个新会话 ;    
    sessionLi = document.createElement('li');
    //  因为是创建出来的会话,所有是没有消息的, 所以<p>里是空的
    sessionLi.innerHTML = `
      <img src="${headImage}" alt="${friend.friendName}头像" class="avatar">
      <div class="list-li">
        <h3>${escapeHtml(friend.friendName)}</h3>
        <p></p>
      </div>
      <div id="unread" class="unread-hide" style="background-color:brown;"></div>
    `;

    // 把 li插入到 UL里,同时是置顶元素
    sessionUL.insertBefore(sessionLi, sessionUL.firstChild);
    // 要给 这个新创建的 加入 点击事件 和 message-session-id
    //  添加点击事件
    sessionLi.onclick = function () {
      clickSession(sessionLi);
    };
    // 让创建的li处于选中状态
    sessionLi.click();

    // 把li的信息传给服务器, 同时添加  message-session-id 属性
    createSession(friend.friendId, sessionLi);
  }
  // 4. 最后会话列表处理完,从好友列表切换到会话列表
  // 前面已经实现过来切换会话列表的函数 ;
  // 这里模拟一下,点击会话标签 ;
  document.querySelector('#session-table').click();
}

// 转义HTML特殊字符（防止XSS攻击）
function escapeHtml(unsafe) {
  if (!unsafe) return '';
  return unsafe.replace(/[&<"'>]/g, function (match) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[match];
  });
}


// 判断这个好友,是否在会话列表里, 如果在返回会话,
// 如果不在返回null;
function getSessionByFriendName(friendName) {
  let liList = document.querySelectorAll('#session-list>li');
  for (let li of liList) {
    // 获取li里的h3, 用来判断是否存在  
    let h3 = li.querySelector('h3');
    if (h3.innerHTML == friendName) {
      return li;
    }
  }
  return null;
}


// 向服务器发送请求,创建会话 , 同时 把会话id 保存到 li里 session-id 属性
function createSession(friendId, sessionLi) {
  $.ajax({
    type: 'post',
    url: '/session/createSession',
    data: { friendId: friendId },
    success: function (result) {
      check(result);
      let sessionId = result.data;
      if (sessionId != null) {
        sessionLi.setAttribute('session-id', sessionId);
        console.log("创建会话成功");
      } else {
        console.log("创建会话失败");
      }

    },
    error: function () {
      console.log("创建会话失败");
    }
  });

};


const message_input = new Vue({
  el: '#message-input',
  data() {
    return {
      inputMessage: ''
    }
  }, methods: {

  }
});


// 发送消息
const send = new Vue({
  el: '#send',
  data() {
    return {

    }
  }, methods: {
    onclick() {
      let sessionId = session_title.sessionId;
      let userId = user.userId;
      let userName = user.userName;
      let content = message_input.inputMessage;
      let headImage = user.avatarUrl;

      if (message_input.inputMessage == null ||
        message_input.inputMessage == '') {
          alert("请输入内容再发送");
        return;   // 输入框什么都没输入
      }
      if (sessionId == 0) {
        alert("请先选择好友");
        return; // 没有选择会话;
      }
      let request = {
        type: 1,
        sessionId: sessionId,
        fromId: userId,
        fromName: userName,
        content: content,
        headImage: headImage
      }
      //  把json转为json字符串
      request = JSON.stringify(request);
      //发送消息
      websocket.send(request);
      message_input.inputMessage = '';
    }
  }
});


// 设置按钮
const setting = new Vue({
  el: '#setting',
  data() {
    return {
      but: 'hide',
      class_name: 'no'
    }
  },
  methods: {
    logout() {
      var flg = confirm("是否退出登录");
      if (flg == true) {
        websocket.close(1000);
        location.href = 'login.html';
      }
    },
    onclick: function () {
      if (this.class_name == 'no') {
        this.class_name = 'yes',
          this.but = '';
      } else {
        this.class_name = 'no',
          this.but = 'hide';
      }
    }
  }

});



// 获取添加好友列表
function getAddList() {
  $.ajax({
    url: '/friend/getAddList',
    type: 'get',
    data: { userId: user.userId },
    success: function (result) {
      const list = result.data;
      let sessionUL = document.querySelector('#session-list');

      list.forEach(ret => {
        // 创建li  
        // 把 li插入到 UL里,同时是置顶元素
        const li = document.createElement('li');

        // 创建头像
        const img = document.createElement('img');
        img.src = ret.headImage || '/pic/kun.jpg'
        img.alt = "头像";
        img.className = "avatar";
        li.appendChild(img);

        // 创建内容
        const div = document.createElement('div');
        div.className = "list-li2";

        // 创建用户名
        const h4 = document.createElement('h4');
        h4.textContent = escapeHtml(ret.fromName);
        div.appendChild(h4);

        const p = document.createElement("p");
        p.textContent = escapeHtml("请求添加好友");
        div.appendChild(p);

        // 创建添加按钮
        const button = document.createElement('button');
        button.textContent = "同意";
        button.addEventListener('click', () => agree(ret));
        div.appendChild(button);

        // 创建取消
        const button2 = document.createElement('button');
        button2.textContent = "拒绝";
        button2.addEventListener('click', () => refuse(ret));
        div.appendChild(button2);

        li.appendChild(div);
        sessionUL.insertBefore(li, sessionUL.children[0]);

      });


    }



  });






}

